<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select class="province">
        <option value="">请选择省份</option>
        <!-- <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
        <option value="A004">湖南</option> -->
    </select>
    <select class="city" name="" id="">
        <option value="">请选择市/区</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
    <select class="region" name="" id="">
        <option value="">请选择县城</option>
        <!-- <option value="A001">朝阳</option>
        <option value="A002">海淀</option>
        <option value="A003">沙河</option>
        <option value="A004">上地</option> -->
    </select>
</body>
<script>
    var province = document.getElementsByClassName('province')[0]
    var city = document.getElementsByClassName('city')[0]
    var region = document.getElementsByClassName('region')[0]
    var xhr = new XMLHttpRequest()
    xhr.open('get', '../json/proData.json')
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(xhr.responseText).list
            var prohtml = `<option value="">请选择省份</option>`
            res.forEach(({ city_id, name }) =>
                prohtml += `<option value="${city_id}">${name}</option>`
            )
            province.innerHTML = prohtml



            province.onchange = function () {
                var cityId = this.value
                var cithtml = `<option value="">请选择市/区</option>`
                res.forEach(item => {
                    if (item.city_id == cityId) {
                        item.list.forEach(({ city_id, name }) =>
                            cithtml += `<option value="${city_id}">${name}</option>`
                        )
                    }
                })
                city.innerHTML = cithtml
                region.innerHTML = `<option value="">请选择县</option>`
            }


            city.onchange = function () {
                var regionId = this.value
                var cityId = province.value
                var reghtml = `<option value="">请选择县</option>`
                var flag = true
                res.forEach(item => {
                    if (item.city_id == cityId) {
                        item.list.forEach(itemm => {
                            if (itemm.city_id == regionId) {
                                if (itemm.list) {
                                    itemm.list.forEach(({ city_id, name }) => {
                                        reghtml += `<option value="${city_id}">${name}</option>`
                                    })
                                } else {
                                    reghtml += `<option value="">没有第三级哦</option>`
                                }
                            }
                        })
                    }
                })
                region.innerHTML = reghtml
            }












        }
    }
    // 省市二级联动
    // 1. 先请求数据
    // 2. 根据请求的数据动态生成 option 放到select框中
    //    下拉框取值:value   设置select内的结构innerHTML
    // 3. 当省份下拉框切换时 => 对应省份名称或编号 => 找到该省份数据 => 获取对应省份找到城市的集合 =>  动态生成城市的下拉框 (2级)
    // 4. 当城市下拉框切换时 => 对应城市名称或编号 => 找到该城市数据 => 获取对应城市找到市区的集合 =>  动态生成市区的下拉框 (3级)


</script>

</html>